<template>
  <el-dialog
    width="500px"
    :title="formData.title"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel"
  >
    <el-table ref="TableRef" :data="tableData">
      <el-table-column show-overflow-tooltip :label="$t('账单金额')" align="center" prop="payAmount">
        <template #default="{ row }">{{ row.payAmount | thousand }}</template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import handleTableSum from '@/utils/handleSum'
import { offlinePayInfo } from '@/api/bill/offlinePaymentReview'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * show
     */
    show: {
      type: Boolean,
    },
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {

        this.getList()
      }
    },
  },
  methods: {
    getList() {
      offlinePayInfo({
        ...this.queryParams,
        id: this.formData.id,
      }).then((res) => {
        this.tableData = [res.data]
      })
    },
    handleSum(param) {
      /**
       * 需要进行统计的字段
       */
      const data = handleTableSum(param, [])
      return data
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
